<template>
  <div class="tabs">
    <el-tag v-for="(tag, index) in tags"
      :key="index"
      :closable="tag.name!=='Home'"
      :effect="tag.name===route.name ? 'dark' : 'plain'"
      size="small"
      @click="handleClick(tag, index)"
      @close="handleClose(tag, index)"
    >
      {{ tag.meta.title }}
    </el-tag>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore, mapMutations } from 'vuex';

const route = useRoute();
const router = useRouter();
const store = useStore();
const tags = computed(() => {
  return store.state.tab.tabList;
})

const handleClick = (tag, index) => {
  router.push({
    name: tag.name
  })
}
const handleClose = (tag, index) => {
  const length = tags.value.length - 1;
  store.commit('CLOSETAG', tag.name)
  if (tag.name !== route.name) return;
  if (index === length) {
    // 关闭的最后一个
    router.push({
      name: tags.value[index - 1].name
    })
  } else {
    // 不是最后一个
    router.push({
      name: tags.value[index].name
    })
  }
}
</script>

<style lang="less" scoped>
.tabs {
  padding: 10px;
  .el-tag {
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>